<template>
  <div class="pick-latex-modal">
    <div class="modal-title">
      <p>插入方程</p>
    </div>
    <div class="latex-input-content">
      <el-input
        id="latexInput"
        v-model="latexdata"
        type="textarea"
        :rows="4"
        resize="none"
        placeholder="请输入Latex语法..."
        @input="value => latexdata = value.replace(/\s+/g, '')" />
        <transition name="text-fade-in">
          <p class="errmessage" v-if="!valid">latex语法不正确，请检查latex</p>
        </transition>
      <el-button type="primary" @click="topicInsertLatex">完成</el-button>
    </div>
    <div class="latex-list">
      <el-scrollbar height="100%">
        <div class="modal-title">
          <p>公式速查表</p>
        </div>
        <div class="content" v-for="(item, index) in latexList" :key="index">
          <el-table
            :data="item.list"
            border
            stripe
            :header-cell-style="{ fontSize: '11px', color: item.textColor, fontWeight: 'normal', background: item.backgroundColor, padding: '5px' }"
            style="width: 100%">
            <el-table-column :label="item.name" align="center">
              <template #default="{ row }">
                <p style="font-size: 13px; color: #000;" @click="handleInsetLatex(row.latex)" v-html="getLatexHtmlString(row.latex)"></p>
              </template>
            </el-table-column>
            <el-table-column prop="latex" label="语法" align="center">
              <template #default="{ row }">
                <p style="font-size: 13px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="handleInsetLatex(row.latex)" >{{ row.latex }}</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, watch, nextTick, onBeforeUnmount } from 'vue'
import { validLatex, getLatexHtmlString } from '../utils/katex'
import latexList from '../config/latex'
import { shortcutKeydown, resetcutKeydown } from '../shortcut-key'

const emits = defineEmits(['insert-latex'])
const props = defineProps({
  currentNode: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const valid = ref(true)
const latexdata = ref(props.currentNode.data?.latex || '')
const updateLatexdata = ref(latexdata.value)

function topicInsertLatex () {
  // 公式没有变化的时候不更新主题
  if (updateLatexdata.value === latexdata.value) return
  if (latexdata.value) {
    valid.value = validLatex(latexdata.value)
    if (valid.value) {
      updateLatexdata.value = latexdata.value
      emits('insert-latex', latexdata.value)
    }
    return
  }
  updateLatexdata.value = latexdata.value
  emits('insert-latex', latexdata.value)
}

function handleInsetLatex (latex) {
  const inputEl = document.querySelector('#latexInput')
  const { selectionStart, selectionEnd } = inputEl
  latexdata.value = latexdata.value.substring(0, selectionStart) + latex + latexdata.value.substring(selectionEnd)
  nextTick(() => {
    const newPosition = selectionStart + latex.length
    inputEl.setSelectionRange(newPosition, newPosition)
    inputEl.focus()
  })
}

onMounted(() => {
  resetcutKeydown()
})

onBeforeUnmount(() => {
  shortcutKeydown()
})

watch(() => props.currentNode, () => {
  latexdata.value = props.currentNode.data?.latex || ''
  updateLatexdata.value = latexdata.value
}, { deep: true })
</script>

<style lang="scss" scoped>
.pick-latex-modal {
  position: fixed;
  top: 75px;
  right: 100px;
  bottom: 100px;
  background: #fff;
  width: 320px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 6px 12px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 8;
  .modal-title {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
    color: #000;
    font-size: 14px;
  }
  .latex-input-content {
    padding: 8px 16px;
    .errmessage {
      font-size: 12px;
      color: #ce2323;
      display: inline-block;
    }
    :deep(.el-button) {
      display: block;
      width: 100%;
      margin-top: 18px;
    }
  }
  .latex-list {
    flex: 1;
    height: 0;
    padding-bottom: 12px;
  }
  .content {
    padding: 6px 16px;
  }
}
</style>
